<template>
    <div id="swiper">
            <van-swipe class="my-swipe" :loop="true" :autoplay="3000" indicator-color="white"
            @click="onchange">
              <van-swipe-item v-for="(image, index) in images" :key="index">
                <!-- 配合 Lazyload 组件实现图片懒加载-->
                <img v-lazy="image.imgUrl" @click="getImg(image,index)"/>
                <!-- <img :src="image"  @click="getImg(image,index)" />-->

              </van-swipe-item>
            </van-swipe>

    </div>
</template>

<script>
    import { Swipe, SwipeItem,ImagePreview } from 'vant';
    import Vue from 'vue';
    import { Lazyload } from 'vant';
    Vue.use(Lazyload);

    export default {
        name: "new_arrival",
        components:{
            'van-swipe':Swipe,
            'van-swipe-item':SwipeItem
        },
        props:[
            'imgUrls',
            'videoUrls'
        ],
        data() {
            return {
              images: [
                {imgUrl:require('../assets/logo.png')},
                {imgUrl:require('../assets/logo.png')},
                {imgUrl:require('../assets/logo.png')},
                {imgUrl:require('../assets/logo.png')}
              ],
               active_:'',    //切换 tab 所对应的状态数字
               instance_before:'',
               instance_after:'',
            };
        },
        //在路由离开的时候，关闭预览的图片
        beforeRouteLeave(to,from,next){
            if(this.active_ == 0){
                this.instance_before.close();
            }else{
                this.instance_after.close();
            }
            next();
        },

        methods:{
            onchange(index){
                this.current =index;
            },
            getImg(images,index){
                 ImagePreview({
                 images: this.images,
                 showIndex:true,
                 loop:true, //是否循环播放
                 startPosition:index
                })
            }
            }
            // //查看图片
            // show_before_img(){
            //     this.instance_before = ImagePreview({
            //         images: [this.warsher_brfore],
            //     });
            // },
            // show_after_img(){
            //     this.instance_after = ImagePreview({
            //         images: [this.warsher_after],
            //     });
            // }

    }
</script>

<style lang="scss" scoped>

/*    .my-swipe .van-swipe-item {*/
/*    color: white;*/
/*    font-size: 20px;*/
/*    line-height: 150px;*/
/*    text-align: center;*/
/*    background-color: #39a9ed;*/
/*  }*/

.swiper {
     width: 100%;
     height: 100%;
    .van-swipe{
      width: 100%;height: 100%;
    }
    img {
      display: inline-block;
      width: 100%;
      height: 100%;
      /*pointer-events: none;*/
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      background: #fff;
    }
  }

</style>